<docs>
  ## 开具证明服务第一步
</docs>
<template>
  <div>
    <mheader type="index" @back_btn="goBack()" title="开具证明服务"></mheader>
    <!-- 选择地区开始 -->
    <div class="choice">
      <co-form :model="data" :rules="rules" ref="form">
        <co-select
          prop="zmxyt"
          label="证明信用途"
          v-model="data.zmxyt"
          :list="zmxytList"
          attrid="dmid"
          attrname="dmmc"
        ></co-select>
        <div v-show="zmxflag" class="yyrs">证明信用途: {{this.zmxtxt}}</div>
        <div class="form-group border-b" v-show="relatives">
          <label class="input-label">亲属关系</label>
          <el-select
            class="elSelect"
            v-model="data.qsgxs"
            multiple
            placeholder="请选择"
            style="width:200%;"
          >
            <el-option
              v-for="(item, i) in options"
              :key="i"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div v-show="qtgxflag">
          <co-input
            label="其他亲属关系"
            max-length="128"
            v-model="data.qtqsgx"
            placeholder="请填写其他亲属关系"
          ></co-input>
        </div>
        <div v-show="twoflag">
          <co-upload label="身份证正面" ref="uploadStraight"></co-upload>
          <co-upload label="身份证反面" ref="uploadReverse"></co-upload>
          <div class="_tip">上传资料支持jpg、png、bmp、jpeg格式的图片，大小不超过200kb；请平铺拍照或扫描图片，确保上传图片清晰完整。</div>
          <co-input
            prop="kwjg"
            label="开往机构"
            max-length="64"
            v-model="data.kwjgmc"
            placeholder="请填写开往机构"
          ></co-input>
          <co-select
            prop="kwjgdwxz"
            label="开往机构单位性质"
            attrid="dmid"
            attrname="dmmc"
            v-model="data.kwjgdwxz"
            :list="kwjgxzList"
          ></co-select>
          <co-upload label="单位介绍信图片" v-show="cdxs" ref="uploadJs"></co-upload>
        </div>
      </co-form>
    </div>
    <div class="next-step">
      <button class="btn btn-primary" @click="nextStep">提交</button>
    </div>
    <!-- 申请成功或失败提示  -->
    <message-card :visible.sync="save.visible"
    :title="save.title" :btn-text="save.btnText"
    :btn-type="save.btnType" @btnClick="msgBtn" @iconCloseClick="iconCloseClick"
    :type="save.type=='success' ? 'success' : (save.type=='email'?'email':'fail')">
      <div v-if="enterFlag">
        <div class="msg-success" v-if="save.type == 'success' ">
          <p class="title">{{msgTitle}}</p>
        </div>
        <div class="msg-fail" v-else>
          <p class="title">{{msgTitle}}</p>
        </div>
      </div>
      <div class="_iphone" v-if="!enterFlag">
        <co-input
          label="手机号"
          v-model="sjhm"
          @input="changePhone"
          placeholder="请输入"
        ></co-input>
        <div class="clearfix">
          <co-input
            style="width:70%;"
            class="left"
            label="短信验证码"
            max-length="4"
            v-model="sjyzm"
            placeholder="请输入"
            :disabled="yzmDisabled"
          ></co-input>
          <button
            type="button"
            style="width:30%;margin-top:0.25rem;"
            class="left btn btn-primary"
            @click="get_yzm"
            :disabled="disabled"
          >{{yzmCode}}</button>
        </div>
      </div>
    </message-card>
  </div>
</template>
<script>
import Mheader from "@/ldry/group/mheader/mheader";
import coForm from "@/base/form/form";
import coInput from "@/base/form/input";
import coSelect from "@/base/form/select";
import coUpload from "@/base/upload/upload";
import coSelectcheck from "@/base/form/selectCheck";
import $ from "common/js/axios";
import { validator } from "common/js/valid";
import { mixinValid } from "common/mixins/mixins";
import MessageCard from "@/ldry/group/messageCard/messageCard";

export default {
  components: {
    coForm,
    MessageCard,
    coInput,
    coSelect,
    coUpload,
    Mheader
  },
  mixins: [mixinValid],
  data() {
    return {
      cdxs: true, //单位人登录显示
      enterFlag:false,
      zmxtxt: "", //文字
      zmxflag: false,
      twoflag: false, //第二步
      relatives: false, //亲属关系
      qtgxflag: false, //其他亲属关系
      yzmCode: "获取验证码",
      yzmDisabled:true,
      disabled: true,
      sjhm:"",
      sjyzm:"",
      data: {
        zmxlx:"01",
        zmxyt: "",
        qsgxs: [], //亲属关系
        qtqsgx: "",
        sfzzmz_id:"",
        sfzfmz_id:"",
        kwjgmc: "", //开往机构
        kwjgdwxz: "", //开往机构性质
        dwjsx_id:""//单位介绍信
      },
      options: [
        {
          value: "01011",
          label: "祖父[爷爷]"
        },
        {
          value: "01022",
          label: "祖母[奶奶]"
        },
        {
          value: "01031",
          label: "外祖父[外公]"
        },
        {
          value: "01042",
          label: "外祖母[外婆、姥姥]"
        },
        {
          value: "02011",
          label: "父亲"
        },
        {
          value: "02022",
          label: "母亲"
        },
        {
          value: "03011",
          label: "养父"
        },
        {
          value: "03022",
          label: "养母"
        },
        {
          value: "04011",
          label: "继父"
        },
        {
          value: "04022",
          label: "继母"
        },
        {
          value: "05011",
          label: "哥哥"
        },
        {
          value: "05021",
          label: "弟弟"
        },
        {
          value: "05032",
          label: "姐姐"
        },
        {
          value: "05042",
          label: "妹妹"
        },
        {
          value: "06010",
          label: "配偶"
        },
        {
          value: "07011",
          label: "儿子"
        },
        {
          value: "07022",
          label: "女儿"
        },
        {
          value: "08010",
          label: "其他"
        }
      ],
      rules: {
        zmxyt: validator('64,"full","证明信用途",false'),
        kwjg: validator('64,"full","开往机构",false'),
        kwjgdwxz: validator('2,"full","开往机构单位性质",false')
      },
      save: {
        type: "email",
        btnText: "确定",
        btnType: "primary",
        title: "手机验证",
        visible: true
      },
      msgTitle: "",
      zmxytList: [], //证明信用途
      kwjgxzList: [] //开往机构性质
    };
  },
  watch: {
    "data.zmxyt": function(val) {
      this.zmxflag = true; //证明信显示文字
      if (val == "") {
        this.zmxflag = false; //证明信显示文字
        this.data.qsgxs = [];
        this.relatives = false; //隐藏亲属
        this.qtgxflag = false; //隐藏其他亲属
        this.twoflag = false; //隐藏第二步
      } else if (val === "11") {
        this.relatives = true; //显示亲属
        this.twoflag = false; //隐藏第二步
      } else {
        this.relatives = false; //隐藏亲属
        this.qtgxflag = false; //隐藏其他亲属
        this.twoflag = true; //第二步
      }
      this.zmxytList.filter((item, i) => {
        if (item.dmid == val) {
          this.zmxtxt = item.dmmc;
        }
        return this.zmxtxt;
      });
    },
    "data.qsgxs": function(val) {
      val.indexOf("08010") == "-1"
        ? (this.qtgxflag = false)
        : (this.qtgxflag = true); //显示其他亲属
      val.length > 0 ? (this.twoflag = true) : (this.twoflag = false); //第二步
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    // 查询就业工种
    GET_jygzCx() {
      //代码表
      $.get("/dafwgl/dmb/dmb?dmbm=rsdagl_ld_d_zmxyt,rsdagl_ld_d_orgtype").then(
        res => {
          this.zmxytList = res.returnData.rsdagl_ld_d_zmxyt; //证明信用途
          this.kwjgxzList = res.returnData.rsdagl_ld_d_orgtype; //开往机构性质
        }
      );
      //身份证
      $.get("/dafwgl/kjzm/tphx").then(res => {
        var res = res.returnData;
        if (res.executeResult === "1") {
          if (res.sfz.sfzzmz_id) {
            this.$refs.uploadStraight.flag = true;
            this.$refs.uploadStraight.tpid = res.sfz.sfzzmz_id;
            this.$refs.uploadStraight.imgSrc = conf.urlPrefix + "/dafwgl/wjscxz/tpxs?tpid=" + res.sfz.sfzzmz_id;
          }
          if (res.sfz.sfzfmz_id) {
            this.$refs.uploadReverse.flag = true;
            this.$refs.uploadReverse.tpid = res.sfz.sfzfmz_id;
            this.$refs.uploadReverse.imgSrc =
              conf.urlPrefix + "/dafwgl/wjscxz/tpxs?tpid=" + res.sfz.sfzfmz_id;
          }
        }
      });
    },
    // 下一步操作
    nextStep() {
      this.$refs.form.validate(() => {
        this.data.sfzzmz_id = this.$refs.uploadStraight.tpid;
        this.data.sfzfmz_id = this.$refs.uploadReverse.tpid;
        this.data.dwjsx_id = this.$refs.uploadJs.tpid;
        if (this.qtgxflag && !this.data.qtqsgx) {
          this.$refs.form.errorMsg = "其他亲属关系不能为空! "
          return
        }
        if (this.$refs.uploadStraight.tpid == "") {
          this.$refs.form.errorMsg = "身份证正面照片未上传成功，请核实后提交！"
          return;
        }
        if (this.$refs.uploadReverse.tpid == "") {
          this.$refs.form.errorMsg = "身份证反面照片未上传成功，请核实后提交！"
          return;
        }
        // if (this.$refs.uploadJs.tpid == "" && this.cdxs) {
        //   this.$refs.form.errorMsg = "单位介绍信图片未上传成功，请核实后提交！"
        //   return;
        // }
        this.POST_reverse();
      });
    },
    // 保存接口
    POST_reverse() {
      this.$loading = true;
      $.post("/dafwgl/kjzm/sqBc", this.data)
        .then(res => {
          this.$loading = false;
          const data = res.returnData;
          if (parseInt(data.executeResult, 10) === 1) {
            this.msgTitle = data.message.msg.replace(/右侧/,'');
            this.save = {
              type: 'success',
              btnText: "查询我的申请",
              btnType: "gray",
              title: "提交成功！",
              visible: true
            };
          } else {
            if(this.$route.query.cdxs == '1'){
              this.save = {
                type: 'fail',
                btnText: "重新选择",
                btnType: "primary",
                title: "提交失败！",
                visible: true
              };
              this.msgTitle = data.message;
            }else{
              this.$refs.form.errorMsg = data.message
              return;
            }
          }
        })
        .catch(() => {});
    },
    // 返回消息按钮点击处理
    msgBtn() {
      // 成功
      if (this.save.type==='success') {
        this.$router.push({ name: "ReverseList" });
      }else if(this.save.type == 'email'){
        if (this.sjyzm == "") {
          this.$alert({
            type: "warning",
            message: "验证码不能为空!"
          });
          return
        }
        if (this.sjyzm.length < "4") {
          this.$alert({
            type: "warning",
            message: "验证码长度必须是4位!"
          });
          return
        }
        this.$loading = true;
        let _data = {
          ylsjh:this.sjhm,
          sjyzm:this.sjyzm
        }
        $.post('/dafwgl/personal/checkSjyzm',_data).then((res) => {
          this.$loading = false;
          var data = res.returnData;
          if (data.executeResult == '0') {
            this.$alert({
              type: "warning",
              message: data.message
            });
            return;
          }else{
            this.save.visible = false;
            this.enterFlag =true;
          }
        }).catch(() => {});
      }else {
        this.save.visible = false;
      }
    },
    // 点击×返回到首页
    iconCloseClick() {
      this.$router.push({ name: "reverseTwo" });
      // if (this.save.type) {
      // } else if (this.save.type == "email") {
      //   this.$router.push({ name: "reverseTwo" });
      // }
    },// 获取验证码
    get_yzm() {
      var _flag = 1
      var exc = /^1\d{10}$/;
      if (!exc.test(this.sjhm)) {
        this.$alert({
          type: "warning",
          message: "手机号码格式不正确!"
        });
        return;
      }
      if (_flag != 1) return
      $.get("/dafwgl/personal/fsdx", {
        params: {
          ylsjh: this.sjhm,
          code:'1'
        }
      })
        .then(res => {
          _flag = 0
          let _res = res.returnData;
          if (+_res.executeResult == 0) {
            this.$alert({
              type: "warning",
              message: _res.message
            });
            return false;
          }
          this.timeout();
        })
        .finally();
    },
     timeout() {
      let count = 60;
      let _this = this;
      _this.disabled = true;
      var countdown = setInterval(function() {
        _this.yzmCode = count + "s";
        if (count == 0) {
          _this.yzmCode = "发送验证码";
          _this.disabled = false;
          clearInterval(countdown);
        }
        count--;
      }, 1000);
    },
    // 输入手机校验预留手机方法
    changePhone(){
      if (this.sjhm.length < 11) return
      var exc = /^1\d{10}$/;
      if (!exc.test(this.sjhm)) {
        this.$alert({
          type: "warning",
          message: "手机号码格式不正确!"
        });
        return;
      }
      var _flag = 1
      if(_flag != 1) return
      $.post('/dafwgl/personal/checkSjh',{ylsjh: this.sjhm}).then((res) => {
        var data = res.returnData;
        _flag = 0
        if (data.executeResult == '0') {
          this.$alert({
            type: "warning",
            message: data.message
          });
          return;
        }else{
          this.disabled = false;
          this.yzmDisabled = false;
         }
      }).catch(() => {});
    },
  },
  created() {
    if (this.$route.query.cdxs == '1') {
      this.cdxs = false
    }
    this.GET_jygzCx();
  }
};
</script>
<style lang="scss" scoped>
@import "~common/scss/variable.scss";
.choice {
  border: $border;
  padding-left: $padding-base;
  background-color: #fff;
  // margin-top: $margin-base;
  border: $border;
}
.next-step {
  margin-top: $margin-base * 5;
  width: 100%;
  box-sizing: border-box;
  padding: $padding-base;
  .btn {
    width: 100%;
  }
}
.yyrs {
  font-size: 0.4444rem;
  text-align: left;
  border-bottom: 1px solid #dbdbdb;
  padding: 0.59259rem 0.59259rem 0.59259rem 0;
}
</style>
